<template>
  <div class="digital-flop" :style="containerStyle">
    <div class="digital-title" v-if="title" :style="titleStyle">
      {{ title }}
    </div>
    <div class="digital-content">
      <div class="digital-number" :style="numberStyle">
        <span 
          v-for="(char, index) in displayValue" 
          :key="index"
          class="digital-char"
          :class="{ 'is-number': /\d/.test(char) }"
          :style="charStyle"
        >
          {{ char }}
        </span>
      </div>
      <div class="digital-unit" v-if="unit" :style="unitStyle">
        {{ unit }}
      </div>
    </div>
    <div class="digital-subtitle" v-if="subtitle" :style="subtitleStyle">
      {{ subtitle }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { animateNumber } from '../utils/animation'

// Props定义
const props = defineProps({
  value: {
    type: [Number, String],
    default: 0
  },
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  unit: {
    type: String,
    default: ''
  },
  precision: {
    type: Number,
    default: 0
  },
  separator: {
    type: String,
    default: ','
  },
  duration: {
    type: Number,
    default: 2000
  },
  fontSize: {
    type: [String, Number],
    default: 48
  },
  color: {
    type: String,
    default: '#00d4ff'
  },
  titleColor: {
    type: String,
    default: '#ffffff'
  },
  backgroundColor: {
    type: String,
    default: 'transparent'
  },
  textAlign: {
    type: String,
    default: 'center'
  },
  animate: {
    type: Boolean,
    default: true
  }
})

// 响应式数据
const currentValue = ref(0)
const displayValue = ref('0')

// 计算属性
const containerStyle = computed(() => ({
  backgroundColor: props.backgroundColor,
  textAlign: props.textAlign
}))

const titleStyle = computed(() => ({
  color: props.titleColor,
  fontSize: typeof props.fontSize === 'number' ? (props.fontSize * 0.5) + 'px' : '20px',
  marginBottom: '8px'
}))

const numberStyle = computed(() => ({
  fontSize: typeof props.fontSize === 'number' ? props.fontSize + 'px' : props.fontSize,
  color: props.color,
  fontWeight: 'bold',
  fontFamily: 'Monaco, Consolas, "Courier New", monospace'
}))

const charStyle = computed(() => ({
  display: 'inline-block',
  minWidth: '0.6em',
  textAlign: 'center'
}))

const unitStyle = computed(() => ({
  color: props.color,
  fontSize: typeof props.fontSize === 'number' ? (props.fontSize * 0.5) + 'px' : '24px',
  marginLeft: '8px',
  verticalAlign: 'baseline'
}))

const subtitleStyle = computed(() => ({
  color: props.titleColor,
  fontSize: typeof props.fontSize === 'number' ? (props.fontSize * 0.25) + 'px' : '12px',
  marginTop: '4px',
  opacity: 0.8
}))

// 格式化数字
const formatNumber = (num) => {
  if (typeof num !== 'number') {
    return String(num)
  }

  let formatted = num.toFixed(props.precision)
  
  if (props.separator && num >= 1000) {
    const parts = formatted.split('.')
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, props.separator)
    formatted = parts.join('.')
  }
  
  return formatted
}

// 更新显示值
const updateDisplayValue = (newValue, animate = true) => {
  const numValue = typeof newValue === 'number' ? newValue : parseFloat(newValue) || 0
  
  if (animate && props.animate && Math.abs(numValue - currentValue.value) > 0) {
    // 使用动画更新
    const startValue = currentValue.value
    const endValue = numValue
    const startTime = Date.now()
    
    const step = () => {
      const elapsed = Date.now() - startTime
      const progress = Math.min(elapsed / props.duration, 1)
      
      // 使用easeOutQuart缓动函数
      const easeProgress = 1 - Math.pow(1 - progress, 4)
      const current = startValue + (endValue - startValue) * easeProgress
      
      currentValue.value = current
      displayValue.value = formatNumber(current)
      
      if (progress < 1) {
        requestAnimationFrame(step)
      } else {
        currentValue.value = endValue
        displayValue.value = formatNumber(endValue)
      }
    }
    
    requestAnimationFrame(step)
  } else {
    // 直接更新
    currentValue.value = numValue
    displayValue.value = formatNumber(numValue)
  }
}

// 监听值变化
watch(() => props.value, (newValue) => {
  updateDisplayValue(newValue, true)
}, { immediate: false })

// 组件挂载时初始化
onMounted(() => {
  updateDisplayValue(props.value, props.animate)
})
</script>

<style scoped>
.digital-flop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(35, 95, 167, 0.1));
  border: 1px solid rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.digital-flop::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shine 3s infinite;
}

.digital-title {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.digital-content {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.digital-number {
  position: relative;
}

.digital-char {
  transition: all 0.3s ease;
  position: relative;
}

.digital-char.is-number {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.digital-unit {
  font-weight: 500;
  opacity: 0.9;
}

.digital-subtitle {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 数字跳动效果 */
@keyframes numberJump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.digital-char.is-number:hover {
  animation: numberJump 0.6s ease-in-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .digital-flop {
    padding: 12px;
  }
}
</style>
